<script setup lang="ts">
import { defineAsyncComponent, ref } from 'vue';
import { toCamel } from '@/utils';
const Overlay = defineAsyncComponent(() => import('@/components/Overlay.vue'));
const itemList = ref<number>(0);
interface chunkRenderParams {
  delay: number;
  chunkSize: number;
  total: number;
}
function chunkRender(option: chunkRenderParams): void {
  const { delay, chunkSize, total } = option;
  const render = () => {
    const timer = setInterval(() => {
      if (itemList.value >= total) {
        clearInterval(timer);
        return;
      }
      itemList.value += chunkSize;
    }, delay);
  };
  render();
}
chunkRender({
  delay: 1000,
  chunkSize: 5,
  total: 100
});
toCamel('sss_wwww');
</script>

<template>
  <div class="home-page">
    <!-- <Overlay>
      <div class="overlayo"></div>
    </Overlay> -->
    <div class="home-page-header">
      <h1>Home Page</h1>
    </div>
    <div class="home-page-content">
      <div
        class="home-page-content-card"
        v-for="(index, item) in itemList"
        :key="index"
        v-viewport="{
          callback: () => {
            console.log('item=>', item);
          }
        }"
      >
        <img
          v-lazy="
            'http://author-platform.bj.bcebos.com/cms_offline/ai_video/353ae07f-16c2-4f9e-8607-8a9884c884f5/role_%E6%9E%97%E7%A7%8B.png?authorization=bce-auth-v1%2FALTAKYWbwQ3YD7dgE6QiY4YIs5%2F2025-09-02T02%3A34%3A54Z%2F3600%2F%2F3020d2bdaaa03155db4144c6073d6843806f95'
          "
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.overlayo {
  width: 100px;
  height: 100px;
  background: red;
}
.home-page {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  overflow: hidden;
  padding-bottom: 50px;
  &-header {
    padding-top: 30px;
    height: 50px;
    background-color: pink;
  }

  &-content {
    flex: 1;
    padding: 10px;
    overflow: scroll;
    &-card {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: ptr(90);
      font-size: ptr(20);
      border-radius: 8px;
      margin-bottom: 10px;
      background: salmon;
      img {
        height: 100%;
        width: 100%;
        // 等比例
      }
    }
  }
}
</style>
